<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/tao.css">
  <title>Document</title>
  <style>
    #order li {
      border: 1px solid orange;
    }
    #order li div.title {
      background-color:bisque;
      line-height: 30px;
      padding: 5px;
      border-bottom: 1px solid orange;
    }
    #order li div.order-goods {
      background-color: #CCCCCC;
    }
    #order li div.order-goods div{
      border-bottom: 1px solid blueviolet;
    }
    #order li div.order-goods div img {
      width: 90px;
    }
    .cancel-order {
      float: right;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 5px;
      background-color: orange;
      color: white;
      cursor: pointer;
    }
    .cancel-order:hover {
      background-color: white;
      color: orange;
    }
  </style>
</head>
<body>
	
  <header><div class="header-container">
   				<div id="top-nav-loginfl">
				    <!--<a href="register.html" name="register" class="register">注册</a>
    <a href="login.html" name="login" class="login">登录</a>-->
    <a href="#" name="username" class="username">    </a>
    <!-- 可以在a链接里面写javascript代码，在href属性中以javascript:开头，后面写js代码 -->
  <a href="javascript:localStorage.clear(); location.reload();" class="logout">退出</a>
   <a href="cart.html">购物车</a>
    <a href="order.html">我的订单</a>
    <script>
      //判断用户名如果存在, 则显示用户名并显示退出按钮, 否则显示注册和登录
      if (localStorage.username) {
        var oUsername = document.querySelector('a[name=username]');
        var oLogout = document.querySelector('.logout');
        oUsername.innerText = localStorage.username;
        oUsername.style.display = 'inline';
        oLogout.style.display = 'inline';
      } else {
        var oRegister = document.querySelector('.register');
        var oLogin = document.querySelector('.login');
        oRegister.style.display = 'inline';
        oLogin.style.display = 'inline';
      }
    </script>
				</div>

   
    <script src="js/myajax.js" charset="utf-8"></script>

    <script>
      var oSearch = document.querySelector("#search");
      oSearch.onkeyup = function(event) {
        if (event.keyCode === 13) {
          location.href = 'search.html?search_text='+this.value;
        }
      }
    </script>
		<div class="daohang">
    <ul id="cat" class="cat"></ul>
		</div>
    <script>
    var oCat = document.querySelector('#cat');
    myajax.get('http://h6.duchengjiu.top/shop/api_cat.php', {}, function(error, responseText){
        var json = JSON.parse(responseText);//返回的整个json对象
        var data = json.data;//json对象当中的data是一个数组
        for (var i = 0; i < data.length; i++) {
          var obj = data[i];//数组里面的每一项是一个商品分类的对象
          oCat.innerHTML += `<li><a href="list.html?cat_id=${obj.cat_id}">${obj.cat_name}</a></li>`;
        }
    });
    </script>
  </div></header>

  <main>
    <ul id="order">

    </ul>
  </main>
  <script src="js/myajax.js" charset="utf-8"></script>
  <script>
    var oOrder = document.querySelector('#order');
    myajax.get('http://h6.duchengjiu.top/shop/api_order.php', {token: localStorage.token}, function(err, responseText){
      var json = JSON.parse(responseText);
      console.log(json);
      var data = json.data;
      if (data.length === 0) {
        oOrder.innerHTML = "<h3>您的订单为空</h3>";
        return;
      }
      for (var i = 0; i < data.length; i++) {
        var obj = data[i];
        //遍历商品列表，拼装HTML
        var goodsHTML = '';
        for (var j = 0; j < obj.goods_list.length; j++) {
          var goods = obj.goods_list[j];
          goodsHTML += `
            <div>
              <img src="${goods.goods_thumb}">
              		   ${goods.goods_name}
                	单价：${goods.goods_price}
             	   数量：${goods.goods_number}
              	小计：${goods.goods_price * goods.goods_number}
            </div>
          `;
        }
        //一件商品的总价
        oOrder.innerHTML += `
                          <li>
                            <div class="title">收货人：${obj.consignee} 总价:${obj.total_prices} <span data-id="${obj.order_id}" class="cancel-order">取消订单</span></div>
                            <div class="order-goods">
                            ${goodsHTML}
                            </div>
                          </li>
                          `;
      }
    });

    oOrder.onclick = function(event) {
      event = event || window.event;
      var target = event.target || event.srcElement;
      if (target.className === 'cancel-order') {
        if (!confirm('确认要取消订单吗?')) {
          return;
        }
        var order_id = target.dataset.id;
        myajax.post('http://h6.duchengjiu.top/shop/api_order.php?token='+localStorage.token+'&status=cancel', {order_id}, function(err, responseText) {
          var json = JSON.parse(responseText);
          if (json.code === 0) {
            alert('订单取消成功');
          }
        });
      }
    }
  </script>
</body>
</html>
